<template>
    <div class="footer pos-rel clearfix">
        <div class="con-width-1200 pos-rel clearfix">
            <ul class="li-list clearfix">
                <li>
                    <a href="#">首页</a>
                    <Ul>
                        <li>
                            <a href="#">企业概况</a>
                        </li>
                        <li>
                            <a href="#">产品展示</a>
                        </li>
                        <li>
                            <a href="#">荣誉展示</a>
                        </li>
                    </Ul>
                </li>
                <li>
                    <a href="#">关于我们</a>
                    <Ul>
                        <li>
                            <a href="#">公司简介</a>
                        </li>
                        <li>
                            <a href="#">权威顾问</a>
                        </li>
                        <li>
                            <a href="#">合作伙伴</a>
                        </li>
                    </Ul>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                    <Ul>
                        <li>
                            <a href="#">芒果</a>
                        </li>
                        <li>
                            <a href="#">坚果</a>
                        </li>
                        <li>
                            <a href="#">干锅</a>
                        </li>
                        <li>
                            <a href="#">其他水果</a>
                        </li>
                    </Ul>
                </li>
                <li>
                    <a href="#">商务合作</a>
                    <Ul>
                        <li>
                            <a href="#">专业人员</a>
                        </li>
                        <li>
                            <a href="#">服务保障</a>
                        </li>
                        <li>
                            <a href="#">客服助手</a>
                        </li>
                    </Ul>
                </li>
                <li>
                    <a href="#">关于我们</a>
                    <Ul>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <li>
                            <a href="#">商务合作</a>
                        </li>
                        <li>
                            <a href="#">服务建议</a>
                        </li>
                        <li>
                            <a href="#">人才招聘</a>
                        </li>
                    </Ul>
                </li>
                <li>
                    <a href="#">联系我们</a>
                    <Ul>
                        <li>
                            <i class="iconfont icon-phone"></i>&nbsp;&nbsp;888-88888888
                        </li>
                        <li>
                            <i class="iconfont icon-location"></i>&nbsp;&nbsp;北京市丰台区南四环西路188号
                        </li>
                    </Ul>
                </li>
            </ul>
            <div class="pos-abs r-img clearfix">
                <ul>
                    <li>
                        <p>微信公众号</p>
                        <img class="img" src="../assets/images/qrcode_jingyujiachuanqi_1.jpg">

                    </li>
                </ul>
            </div>
            <div class="pos-abs share clearfix">
                <ul>
                    <Li><i class="iconfont icon-weixin"></i></Li>
                    <Li><i class="iconfont icon-qq"></i></Li>
                    <Li><i class="iconfont icon-weibo"></i></Li>
                </ul>
            </div>
        </div>
        <div class="pos-abs version">XXXX  版权所有  1234567889  备案号：23455vgggg555556666
        </div>
    </div>
</template>

<script>
    export default {
        name: "Footer",
        props: {
            msg: String
        }
    };
</script>

<style>
    @import "../assets/css/public.css";

    .footer {
        padding: 60px 0px 80px 0px;
        background: #333333;
        color: #e1b095;
    }

    .footer ul.li-list li {
        float: left;
        width: 160px;
        text-align: left;
    }

    .footer ul.li-list li:nth-child(6) {
        width: 260px;
    }
    .footer ul.li-list li:nth-child(6) ul li{
        width:100%;
    }

    .footer ul.li-list li a,
    .footer ul.li-list li{
        color: #fff;
        font-size: 14px;
        line-height: 30px;
    }

    .footer ul.li-list li a:hover {
        color: rgba(255, 176, 149, 1);
    }

    .footer ul.li-list > li > a {
        font-size: 16px;
        font-weight: bold;
    }

    .footer ul.li-list > li > ul {
        padding-top: 10px;
    }

    .version {
        left: 0px;
        text-align: center;
        right: 0px;
        bottom: 0px;
        padding: 10px;
        background: #222222;
        color: #fff;
    }

    .r-img {
        top: 0px;
        right: 0px;
    }

    .r-img ul li {
        float: left;
        margin-left: 50px;
        text-align: center;
    }

    .r-img ul li > .img {
        width: 120px;
        height: 120px;
        background: rgba(255, 255, 255, 0.6);
    }
    .r-img ul li p{
        color:#fff;
        font-size:16px;
        font-weight: bold;
        line-height:30px;
    }

    .r-link {
        top: -10px;
        right: 0px;
        width: 210px;
        color: rgba(255, 255, 255, 0.5);
    }

    .r-link h2 {
        font: bold 12px/30px "Microsoft YaHei";
        text-align: left;
        margin-left: 5px;
    }

    .r-link p {
        float: left;
        margin: 0px 5px;
        font-size: 12px;
        cursor: pointer;
    }

    .r-link p:hover {
        color: rgba(255, 255, 255, 0.9);
    }
    .share{bottom:10px;right:100px;width:240px;}
    .share ul li{
        float:left;
        padding-right:20px;
        color:#fff;

    }
    .share ul li i{
        font-size:24px;
    }
</style>
